/* eslint-disable no-unused-vars */
import * as Antd from 'antd';
import React, { useEffect, useImperativeHandle, useState, useContext, forwardRef, useRef } from 'react';
import { Button, Form, Layout, message, Modal, Drawer, Input } from 'antd';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';

const ReactLiveCode = (props) => {
  const { mode = 'edit', code, onChange, scope } = props;
  const scope2 = {
    Antd, // antd 总引用
    React, // react 总引用
    useEffect, // 快捷方式
    useImperativeHandle,
    useState,
    useRef,
    useContext,
    forwardRef,
    Button, // 快捷方式
    Modal,
    Input,
    message,
    Layout,
    ...scope,
  };

  React.useEffect(() => {}, []);
  // useEffect(() => {}, [code]);
  const render = () => {
    if (mode === 'edit') {
      return (
        <>
          <LiveProvider code={code} scope={scope2} transformCode={onChange}>
            <LiveEditor />
            <LiveError />
          </LiveProvider>
        </>
      );
    } else {
      return (
        <LiveProvider code={code} scope={scope2}>
          <LivePreview />
        </LiveProvider>
      );
    }
  };
  return <>{render()}</>;
};

export default ReactLiveCode;
